import React, { useEffect, useState } from 'react'
import ShopSearch from '../../components/Shop/ShopSearch'
import { Button, Table, ConfigProvider, message, Tag, Modal, notification, Input } from 'antd'
import zh_CN from 'antd/es/locale/zh_CN'
import type { TableRowSelection } from 'antd/es/table/interface';
import type { ColumnsType } from 'antd/es/table';
import { findAll } from '../../apis/shopfind';
import { BankOutlined } from '@ant-design/icons'
import { getWarnData } from '../../apis/shopfind';
import { findlast } from '../../apis/shopfind';
import { setShopType } from '../../apis/shopfind';

const { TextArea } = Input;

type Props = {}

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const Shop = (props: Props) => {
  const [data, setData] = useState([])
  const [total, setTotal] = useState(0)
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  const [isModalOpen3, setIsModalOpen3] = useState(false);
  const [detailsData, setDetailsData] = useState<any>([])
  const [warnData, setWarnData] = useState<any>([])



  //门店详情模态框控制
  const showModal = (val: any) => {
    setDetailsData(val)
    setIsModalOpen(true);
  };

  // const handleOk = () => {
  //   setIsModalOpen(false);
  // };

  const handleCancel = () => {
    setIsModalOpen(false);
  };


  //警告详情模态框控制
  const showModal2 = async (val: any) => {
    // console.log('aaa',val.id);

    const res = await getWarnData({ id: val.id })
    console.log('res', res.data);
    if (res.status === 200) {
      setWarnData(res.data.warnlist)
    }
    setIsModalOpen2(true);
  };

  const handleOk2 = () => {
    setIsModalOpen2(false);
  };

  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };

  // const showModal3 = (val: any) => {
  //   setIsModalOpen3(true);
  // };

  const handleCancel3 = () => {
    setIsModalOpen3(false);
  };

  const columns: ColumnsType<DataType> = [
    {
      title: '商铺名称',
      dataIndex: 'shopName',
    },
    {
      title: '信誉积分',
      dataIndex: 'prestige',
    },
    {
      title: '商铺状态',
      dataIndex: 'status',
      render: (text, val: any) => (
        val.status === 1 ? <Tag color="cyan">启动</Tag> : <Tag color='red'>停止</Tag>
      )
    },
    {
      title: '电话',
      dataIndex: 'telephone',
    },
    {
      title: '商铺类型',
      dataIndex: 'type',
      render: (text, val: any) => (
        val.type === 0 ? <Tag color="cyan">充电站</Tag> : <Tag color='green'>商铺</Tag>
      )
    },
    {
      title: '门店详情',
      dataIndex: 'details',
      render: (text, val: any) => (
        <a href="#" onClick={() => showModal(val)}>查看详情</a>
      )
    },
    {
      title: '查看警告',
      dataIndex: 'viewWarnings',
      render: (text, val: any) => (
        <a href="#" onClick={() => showModal2(val)}>警告详情</a>
      )
    },
    {
      title: '警告',
      dataIndex: 'warn',
      render: (text, val: any) => (
        <Button onClick={() => warnBtn(val)}>警告</Button>
      )
    },
    {
      title: '下架',
      dataIndex: 'undercarriage',
      render: (text, val: any) => (
        val.status === 1 ? <Button onClick={() => shopTypeBtn(val)}>停用</Button> : <Button onClick={() => shopTypeBtn(val)}>启用</Button>
      )
    },
  ];



  const warnColumns: ColumnsType<DataType> = [
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '详细描述',
      dataIndex: 'description',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (text, val: any) => (
        val.status === 1 ? '已处理' : '未处理'
      )
    },
    {
      title: '警告处分',
      dataIndex: 'action',
    },

  ];

  useEffect(() => {
    getfindAll()
  }, [])

  //获取所有值
  const getfindAll = async (val?: any) => {
    const res = await findAll(val)
    console.log(res);
    if (res.status === 200) {
      setData(res.data.rows)
      setTotal(res.data.total)
    }
  }

  //警告按钮
  const warnBtn = async (val: any) => {
    // console.log(val);
    const res = await findlast({ shopId: val.id })
    console.log('res', res);
    if (res.data.result === true) {
      notification.open({
        message: '警告',
        description:
          '距离上次警告时间未过七天',
        onClick: () => {
          console.log('Notification Clicked!');
        },
      });
    } else {
      setIsModalOpen3(true);
    }


  }

  //改变门店状态
  const shopTypeBtn =async (val: any) => {
    let status = 0
    console.log('val.status',val.status);
    if (val.status === 1) {
      console.log('a');
      
       status = 2
    } else {
      console.log('b');
      
       status = 1
    }
    const res = await setShopType({
      id:val.id,
      status
    })
    console.log('sc',res);
    if(res.status===200){
      message.error('已经停用！')
    }else{
      message.success('已经启动！')
    }
    getfindAll()
  }

  //获取搜索值
  const getSeaData = (val: any) => {
    console.log('val', val);
    getfindAll(val)
  }
  //获取页数和当前页
  const updatePage = (val: any) => {
    console.log('val', val);
    const data = {
      pageNum: val.current,
      pageSize: val.pageSize
    }
    getfindAll(data)
  }

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  //重置
  const resetting = () => {
    getfindAll()
  }


  const onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    console.log('Change:', e.target.value);
  };

  return (
    <div>
      {/* 搜索 */}
      <div>
        <ShopSearch getSeaData={getSeaData} resetting={resetting}></ShopSearch>
      </div>
      {/* 表单 */}
      <div>
        <ConfigProvider locale={zh_CN}>
          <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
            rowKey='id'
            pagination={{ total: total, pageSizeOptions: [10, 20, 50, 100], showQuickJumper: true, showTotal: (total, range) => `显示 ${range[0]}-${range[1]} 条记录, 共 ${total} 条数据` }} onChange={updatePage}
          />
        </ConfigProvider>
      </div>

      {/* 商铺详情模态框 */}
      <Modal title="商铺详情" open={isModalOpen} onCancel={handleCancel} footer={null} width={'700px'} >
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />商铺名称:{detailsData.shopName}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />商铺账户:{detailsData.account}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />商铺地址:{detailsData.address}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />手机号码:{detailsData.telephone}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />营业执照:{detailsData.licence}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />商铺金额:{detailsData.money}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />店长姓名:{detailsData.managerName}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />身份证号:{detailsData.idcard}</div>
        <div style={{ lineHeight: '30px' }}><BankOutlined style={{ color: 'rgb(24,144,255)' }} />营业时间:{detailsData.startTime}~{detailsData.endTime}</div>
      </Modal>

      {/* // 警告详情模态框 */}
      <Modal title="警告详情" open={isModalOpen2} onOk={handleOk2} onCancel={handleCancel2} width={'1000px'} >
        <Table columns={warnColumns} dataSource={warnData} rowKey='id' />;
      </Modal>

      {/* 警告内容的模态框 */}
      <Modal title="添加警告" open={isModalOpen3} onCancel={handleCancel3} width={'1000px'} >
        <div>
          <TextArea showCount maxLength={100} onChange={onChange} />
        </div>
      </Modal>

    </div>
  )
}

export default Shop